<template>
	<div class="login-container">
		<div class="login-form">
			<el-form :model="model" :rules="rules" class="form-box">
				<h1 class="title">中后台管理系统</h1>
				<el-form-item prop="username">
					<el-input v-model="model.username" placeholder="请输入用户名" :prefix-icon="User" />
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="model.password" type="password" placeholder="请输入密码" :prefix-icon="Lock" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="width: 100%" @click="onLogin">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'

const router = useRouter()
const useStore = useUserStore()

const model = reactive({
	username: '',
	password: ''
})

const rules = reactive({
	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const onLogin = () => {
	useStore.storeUserLogin(model).then(() => {
		router.push({ path: '/' })
	})
}
</script>

<style lang="less" scoped>
.login-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	height: 100vh;
	background-color: var(--rysx-color-main);

	.login-form {
		display: flex;
		flex-direction: column;
		width: 400px;
	}

	.form-box {
		text-align: center;
	}
}
</style>
